
export const echartTheme = {
    "color": [
        "#516b91",
        "#59c4e6",
        "#edafda",
        "#93b7e3",
        "#a5e7f0",
        "#cbb0e3"
    ],
    "backgroundColor": "rgba(0,0,0,0)",
    "textStyle": {},
    "title": {
        "textStyle": {
            "color": "#516b91"
        },
        "subtextStyle": {
            "color": "#93b7e3"
        }
    },
    "line": {
        "itemStyle": {
            "borderWidth": "2"
        },
        "lineStyle": {
            "width": "2"
        },
        "symbolSize": "6",
        "symbol": "emptyCircle",
        "smooth": true
    },
    "radar": {
        "itemStyle": {
            "borderWidth": "2"
        },
        "lineStyle": {
            "width": "2"
        },
        "symbolSize": "6",
        "symbol": "emptyCircle",
        "smooth": true
    },
    "bar": {
        "itemStyle": {
            "barBorderWidth": 0,
            "barBorderColor": "#ccc"
        }
    },
    "pie": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "scatter": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "boxplot": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "parallel": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "sankey": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "funnel": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "gauge": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        }
    },
    "candlestick": {
        "itemStyle": {
            "color": "#edafda",
            "color0": "transparent",
            "borderColor": "#d680bc",
            "borderColor0": "#8fd3e8",
            "borderWidth": "2"
        }
    },
    "graph": {
        "itemStyle": {
            "borderWidth": 0,
            "borderColor": "#ccc"
        },
        "lineStyle": {
            "width": 1,
            "color": "#aaaaaa"
        },
        "symbolSize": "6",
        "symbol": "emptyCircle",
        "smooth": true,
        "color": [
            "#516b91",
            "#59c4e6",
            "#edafda",
            "#93b7e3",
            "#a5e7f0",
            "#cbb0e3"
        ],
        "label": {
            "color": "#eeeeee"
        }
    },
    "map": {
        "itemStyle": {
            "areaColor": "#f3f3f3",
            "borderColor": "#516b91",
            "borderWidth": 0.5
        },
        "label": {
            "color": "#000"
        },
        "emphasis": {
            "itemStyle": {
                "areaColor": "#a5e7f0",
                "borderColor": "#516b91",
                "borderWidth": 1
            },
            "label": {
                "color": "#516b91"
            }
        }
    },
    "geo": {
        "itemStyle": {
            "areaColor": "#f3f3f3",
            "borderColor": "#516b91",
            "borderWidth": 0.5
        },
        "label": {
            "color": "#000"
        },
        "emphasis": {
            "itemStyle": {
                "areaColor": "#a5e7f0",
                "borderColor": "#516b91",
                "borderWidth": 1
            },
            "label": {
                "color": "#516b91"
            }
        }
    },
    "categoryAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#cccccc"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#999999"
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": [
                    "#eeeeee"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.05)",
                    "rgba(200,200,200,0.02)"
                ]
            }
        }
    },
    "valueAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#cccccc"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#999999"
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": [
                    "#eeeeee"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.05)",
                    "rgba(200,200,200,0.02)"
                ]
            }
        }
    },
    "logAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#cccccc"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#999999"
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": [
                    "#eeeeee"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.05)",
                    "rgba(200,200,200,0.02)"
                ]
            }
        }
    },
    "timeAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#cccccc"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "color": "#999999"
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": [
                    "#eeeeee"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.05)",
                    "rgba(200,200,200,0.02)"
                ]
            }
        }
    },
    "toolbox": {
        "iconStyle": {
            "borderColor": "#999999"
        },
        "emphasis": {
            "iconStyle": {
                "borderColor": "#666666"
            }
        }
    },
    "legend": {
        "textStyle": {
            "color": "#999999"
        }
    },
    "tooltip": {
        "axisPointer": {
            "lineStyle": {
                "color": "#cccccc",
                "width": 1
            },
            "crossStyle": {
                "color": "#cccccc",
                "width": 1
            }
        }
    },
    "timeline": {
        "lineStyle": {
            "color": "#8fd3e8",
            "width": 1
        },
        "itemStyle": {
            "color": "#8fd3e8",
            "borderWidth": 1
        },
        "controlStyle": {
            "color": "#8fd3e8",
            "borderColor": "#8fd3e8",
            "borderWidth": 0.5
        },
        "checkpointStyle": {
            "color": "#8fd3e8",
            "borderColor": "#8a7ca8"
        },
        "label": {
            "color": "#8fd3e8"
        },
        "emphasis": {
            "itemStyle": {
                "color": "#8fd3e8"
            },
            "controlStyle": {
                "color": "#8fd3e8",
                "borderColor": "#8fd3e8",
                "borderWidth": 0.5
            },
            "label": {
                "color": "#8fd3e8"
            }
        }
    },
    "visualMap": {
        "color": [
            "#516b91",
            "#59c4e6",
            "#a5e7f0"
        ]
    },
    "dataZoom": {
        "backgroundColor": "rgba(0,0,0,0)",
        "dataBackgroundColor": "rgba(255,255,255,0.3)",
        "fillerColor": "rgba(167,183,204,0.4)",
        "handleColor": "#a7b7cc",
        "handleSize": "100%",
        "textStyle": {
            "color": "#333"
        }
    },
    "markPoint": {
        "label": {
            "color": "#eeeeee"
        },
        "emphasis": {
            "label": {
                "color": "#eeeeee"
            }
        }
    }
}
// 饼图样式
export const pieEchart = (datas) => {
    return {

        series: [
            {
                radius: ['25%', '51%'],
                name: 'Access From',
                type: 'pie',

                emphasis: {
                    label: {
                        show: true,
                        fontSize: '12',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    normal: {
                        show: true,
                        length: 10,
                        lineStyle: {
                            cap: 'round',
                        },
                        align: 'right'

                    },
                    color: "#000",
                    emphasis: {
                        show: true
                    }
                },
                data: datas
            },
            {
                radius: ['47%', '51%'],
                center: ['50%', '50%'],
                type: 'pie',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                animation: false,
                tooltip: {
                    show: false
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(250,250,250,0.5)'
                    }
                },
                data: [{
                    value: 1,
                }],
            }
        ]
    }
}
function filterColor(num): String {
    let colors = '#0eaf13';
    if(num > 0 && num <= 20){
        colors = '#0eaf13'  
    }else if(num > 20 && num <= 40){
        colors = '#328af7' 
    }else if(num > 40 && num <= 60){
        colors = '#f75f32'
    }else if(num > 60 && num <= 80){
        colors = '#ed3619'
    }else if(num > 80){
        colors = '#ed1919'
    }
    return colors
}
// 迈速表
export const Speedometer = (num) => {


    return {
        title: {
            text: `${num}%`,
            x: '50%',
            top: 'middle',
            textAlign: 'center',
            textStyle: {
                fontSize: '20',
                fontWeight: '100',
                textAlign: 'center',
            },
        },
        itemStyle:{
            normal: {
                show: true,
                length: 10,
                lineStyle:{
                    cap: 'round',
                },
                align: 'right'

            },
        },
        series: [
            {
                type: 'pie',
                radius: ['60%', '70%'],
                center: ['50%', '50%'],
                data: [{
                    hoverOffset: 1,
                    value:num,
                    name: '',
                    itemStyle: {
                        color: filterColor(num)
                    },
                    label: {
                        show: false
                    },
                    
                    labelLine: {
                        normal: {
                            show: true,
                            length: 10,
                            lineStyle:{
                                cap: 'round',
                            },
                            align: 'right'
    
                        },
                        color: "#000",
                        emphasis: {
                            show: true
                        }
                    },
                    hoverAnimation: false,

                },
                {
                  
                    value: 100-num,
                    hoverAnimation: false,
                    itemStyle: {
                        color: '#ccc',
                        normal: {
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                            color: '#ccc',
                        },
                    },
                }
                ]
            },
            {
                type: 'pie',
                zlevel: 0,
                silent: true,
                startAngle: -147.5,
                radius: ['71%', '70%'],
                z: 1,
                label: {
                    normal: {
                        show: false
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                itemStyle: {
                    color: '#ccc'
                },
                data: [{
                    value: 20,
                    itemStyle: {
                        normal: {
                            borderWidth: 20,
                            borderColor: "rgba(0,0,0,0)",
                        }
                    }
                }]
            },
        ]
    };

}

// 仪表盘
export const Dashboard = (num) => {
    return {
        series: [

            {
                type: 'gauge',
                center: ['50%', '60%'],
                startAngle: 200,
                endAngle: -20,
                min: 0,
                max: 100,
                splitNumber: 10,
                progress: {
                    show: true,
                    width: 10
                },
                polar: {
                    center: ['50%', '50%'],
                    // radius: '180'
                    radius: '80%'
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        width: 10
                    }
                },
                axisTick: {
                    distance: -21,
                    splitNumber: 5,
                    lineStyle: {
                        width: 2,
                    }
                },
                splitLine: {
                    distance: -21,
                    length: 10,
                    lineStyle: {
                        width: 2,
                    }
                },
                axisLabel: {
                    distance: -15,
                    fontSize: 10
                },
                anchor: {
                    show: false
                },
                title: {
                    show: false
                },
                detail: {
                    valueAnimation: true,
                    width: '60%',
                    lineHeight: 40,
                    borderRadius: 8,
                    offsetCenter: [0, '-15%'],
                    fontSize: 20,
                    fontWeight: '400',
                    formatter: '{value}%',
                    color: 'auto'
                },
                data: [
                    {
                        value: num
                    }
                ]
            }
        ]
    };

}
